<template>
  <div class="department" id="department">
    <!-- 右侧 -->
    <div class="department_right">
      <div class="app-container-btn">
        <!-- <el-button type="primary" v-if="btnShow" @click="yj_saveForm('formData')">保存</el-button> -->
        <el-button @click="goBack">返回</el-button>
      </div>
      <!-- 表格 -->
      <div class="text_table TensionRealTime">
        <div class="dialogBody common table_detail">
          <div class="app-container-area-title">
            <span class="app-container-area-title-divider"></span>
            <span>基本信息</span>
          </div>
          <div>
            <publicForm
              ref="publicForm"
              lableWidth="95px"
              :formObj="formObjSC"
              :formData="baseData"
            >
            </publicForm>
          </div>
          <div class="app-container-area-title">
            <span class="app-container-area-title-divider"></span>
            <span>材料用量</span>
          </div>

          <div
            style="flex: 1"
            id="materialPage"
            class="dialogBodyBox TensionRealTimesecondLevelBox levelClass materialClass Multi_level_header"
          >
            <el-table
              v-if="isShow"
              :stripe="false"
              width="100%"
              min-height="320"
              height="92%"
              :data="tableData1"
              style="width: 99%"
            >
              <el-table-column
                type="index"
                :index="indexMethod"
                label="序号"
                width="55"
                align="center"
              />

              <el-table-column
                prop="F_DischargeDates"
                label="出料时间"
                min-width="150"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="设计重量值(kg)/实际称量值(kg)/重量偏差(%)"
                align="center"
              >
                <el-table-column
                  prop="province"
                  label="水"
                  min-width="60"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <div>{{ scope.row.F_WaterDesignValue }}</div>
                      <div>{{ scope.row.F_WaterActualValue }}</div>
                      <div :class="'bgwarn' + scope.row.F_WaterWarningLevel">
                        {{ scope.row.F_WaterDeviateValue }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="zip"
                  label="水泥1"
                  min-width="60"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <div>{{ scope.row.F_Cement1DesignValue }}</div>
                      <div>{{ scope.row.F_Cement1ActualValue }}</div>
                      <div :class="'bgwarn' + scope.row.F_Cement1WarningLevel">
                        {{ scope.row.F_Cement1DeviateValue }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="city"
                  label="水泥2"
                  min-width="60"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <div>{{ scope.row.F_Cement2DesignValue }}</div>
                      <div>{{ scope.row.F_Cement2ActualValue }}</div>
                      <div :class="'bgwarn' + scope.row.F_Cement2WarningLevel">
                        {{ scope.row.F_Cement2DeviateValue }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="zip"
                  :label="aggregateData[0]"
                  min-width="60"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <div>{{ scope.row.F_Aggregate1DesignValue }}</div>
                      <div>{{ scope.row.F_Aggregate1ActualValue }}</div>
                      <div
                        :class="'bgwarn' + scope.row.F_Aggregate1WarningLevel"
                      >
                        {{ scope.row.F_Aggregate1DeviateValue }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="province"
                  :label="aggregateData[1]"
                  min-width="60"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <div>{{ scope.row.F_Aggregate2DesignValue }}</div>
                      <div>{{ scope.row.F_Aggregate2ActualValue }}</div>
                      <div
                        :class="'bgwarn' + scope.row.F_Aggregate2WarningLevel"
                      >
                        {{ scope.row.F_Aggregate2DeviateValue }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="zip"
                  :label="aggregateData[2]"
                  min-width="60"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <div>{{ scope.row.F_Aggregate3DesignValue }}</div>
                      <div>{{ scope.row.F_Aggregate3ActualValue }}</div>
                      <div
                        :class="'bgwarn' + scope.row.F_Aggregate3WarningLevel"
                      >
                        {{ scope.row.F_Aggregate3DeviateValue }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="city"
                  :label="aggregateData[3]"
                  min-width="60"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <div>{{ scope.row.F_Aggregate4DesignValue }}</div>
                      <div>{{ scope.row.F_Aggregate4ActualValue }}</div>
                      <div
                        :class="'bgwarn' + scope.row.F_Aggregate4WarningLevel"
                      >
                        {{ scope.row.F_Aggregate4DeviateValue }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="zip"
                  :label="aggregateData[4]"
                  min-width="60"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <div>{{ scope.row.F_Aggregate5DesignValue }}</div>
                      <div>{{ scope.row.F_Aggregate5ActualValue }}</div>
                      <div
                        :class="'bgwarn' + scope.row.F_Aggregate5WarningLevel"
                      >
                        {{ scope.row.F_Aggregate5DeviateValue }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="province"
                  label="矿粉"
                  min-width="60"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <div>{{ scope.row.F_OreDesignValue }}</div>
                      <div>{{ scope.row.F_OreActualValue }}</div>
                      <div :class="'bgwarn' + scope.row.F_OreWarningLevel">
                        {{ scope.row.F_OreDeviateValue }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="zip"
                  label="粉煤灰"
                  min-width="65"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <div>{{ scope.row.F_FlyashDesignValue }}</div>
                      <div>{{ scope.row.F_FlyashActualValue }}</div>
                      <div :class="'bgwarn' + scope.row.F_FlyashWarningLevel">
                        {{ scope.row.F_FlyashDeviateValue }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="city"
                  label="外加剂1"
                  min-width="70"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <div>{{ scope.row.F_Admixture1DesignValue }}</div>
                      <div>{{ scope.row.F_Admixture1ActualValue }}</div>
                      <div>{{ scope.row.F_Admixture1DeviateValue }}</div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="zip"
                  label="外加剂2"
                  min-width="70"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div class="lineBoxhidden">
                      <div>{{ scope.row.F_Admixture2DesignValue }}</div>
                      <div>{{ scope.row.F_Admixture2ActualValue }}</div>
                      <div>{{ scope.row.F_Admixture2DeviateValue }}</div>
                    </div>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column
                prop="F_ActualCalculation"
                label="实际方量"
                min-width="70"
                align="center"
              >
              </el-table-column>
            </el-table>

            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="tableList.page"
              :page-size="tableList.pageSize"
              :total="queryCriteriaData1.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import actions from "@/actions";

import tree from "@/components/public/el-trees"; //左侧机构树
import TableData from "@/components/HntManage/el-tables"; //主页面列表
// import Pagination from "@/components/public/el-pagination"; //主页面分页
import Pagination from "@/components/TensionAndGrout/TensionManage/TensionRealTime/el-pagination"; //弹框分页

import elBreadcrumb from "@/components/public/el-breadcrumb.vue"; //面包屑
import publicForm from "@/components/public/el-form.vue"; //弹框form
import formJs from "./regexDetail.js"; //新增弹框配置项
import {
  getTotalAmountDetail, //任务单详情
} from "@/api/request.js";

export default {
  name: "production-tasks",
  data() {
    return {
      name: "production-tasks", //按钮配置页面代号
      projectsObj: [], //项目名
      tendersObj: [],
      editLoading: false,
      yj_view: null,
      projectName: [], //下拉框项目名称
      LotName: [], //下拉框标段名称
      bhzDataList: [], //拌合站
      bhjDataList: [], //拌合机

      // 分页
      navigatepageNums: null, //是否显示分页
      queryCriteriaData: {},
      // 分页

      // 列表
      getList: {
        fCheckStatus: "0", //0- APP端查询  1-填报人列表  2-场站列表  3-现场列表
        modelType: "", // 0代办 1已办 不传或传空 表示列表页查询
        page: 1, //页码
        pageSize: 20, //每页条数
        projectId: "", // 查询条件项目ID
        companyId: "", // 查询条件标段ID
        stationId: "", // 查询条件拌合站ID
        machineId: "", // 查询条件拌合机ID
        fCompanyid: "", // 左侧选中组织机构id
        userId: "", // 查询待办或已办时传 列表页查询不传
      },
      loading: false, //列表转载
      fId: null, //当前行数据fId
      table_config: formJs.table_config,
      tableData: [], //表格列表数据列表
      row: null, //当前行
      // 列表

      // 弹框
      timeYMD: null, //当前日期
      btnShow: true,
      disabled: false,
      dialogTitle: "",
      loadingEditDialog: false, //弹框loading
      dialogEditVisible: false, //新增弹框是否显示
      formObjText: formJs.formObjs,
      formObjText1: formJs.formObj1s,
      handleObj: formJs.handleObj, //场站
      // handleObjs1: formJs.handleObjs1,
      processObj: formJs.processObj, //现场
      // processObj1: formJs.processObjs1, //一级审核
      formData: formJs.formData,
      recordfiles: [], //删除文件
      fSourcefileList: [],
      stationfileList: [],
      saveData: formJs.saveData,
      // 弹框

      // 弹框2
      loadingEditDialogSC: false, //弹框loading
      dialogEditVisibleSC: false, //新增弹框是否显示
      formObjSC: formJs.formObjSC, //生产任务单弹框
      baseData: formJs.baseData,
      isShow: false,
      navigatepageNums1: null, //是否显示分页
      queryCriteriaData1: {}, //分页
      aggregateData: ["骨料1", "骨料2", "骨料3", "骨料4", "骨料5"],
      tableData1: [],
      tableList: {
        companyid: "", // 施工标段id
        taskNumber: "",
        page: 1, // 当前页码
        pageSize: 15, // 每页显示条数
      },
      // 弹框2

      // 机构树
      highlightBd: true, //左侧机构树停留背景色
      treelength: false, //左侧树显示隐藏
      checked: true, //查看下级按钮
      showName: "未选择公司",
      companyTree: "", //所有数据
      treeData: [], //左侧树状图数据
      defaultProps: {
        children: "children",
        label: "fShortname",
      },
      treeText: {
        //树状图参数
        companyId: null,
        userId: null,
        text: null,
      },
      checkData: [], //树状图默认选中id
      // 机构树
      activeNames: ["0", "1"],
      userInfo: {}, //登录用户
      token: null,
    };
  },
  components: {
    tree, //左侧组织机构数
    TableData, //主页面列表
    elBreadcrumb, //面包屑
    publicForm, //弹框表格
    Pagination, //分页
  },
  mounted() {
    actions.onGlobalStateChange((state, prev) => {
      this.projectsObj = prev.currentUser.projects;
      this.token = prev.token;
    }, true);
    this.editText2();
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    selectProject(e) {
      this.falgId = e;
      this.tendersObj = [];
      this.bhzDataList = [];
      this.getList.fCompanyid = "";
      this.getList.stationId = "";
      this.getList.machineId = "";
      this.bhjDataList = [];
      // console.log(e);
      this.getTender(e);
    },
    async getTender(e) {
      await this.$http(
        " http://172.18.5.31:8300/IOTManagement/Base/Company/getGXJLBaseCompanyList.do?projectId=" +
          e,
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: localStorage.getItem("access_token"),
          },
        }
      ).then((res) => {
        if (res.status == 200) {
          var data = res.data.data.GXCompanyList;
          this.tendersObj = [];
          if (data.length == 0) {
            this.$message.warning({
              content: "有其他人员登录此账号！",
              duration: 1000,
            });
            setTimeout(() => {
              window.location.href = "http://172.18.5.201:1080/login";
            }, 1200);
          } else if (data.length == 1) {
            data.map((item) => {
              this.tendersObj.push({
                fItemName: item.sectionName,
                fItemValue: item.sectionId,
              });
            });
            this.getList.fCompanyid = data[0].sectionId;
          } else {
            this.tendersObj = [
              {
                fItemName: "所有标段",
                fItemValue: "",
              },
            ];
            data.map((item) => {
              this.tendersObj.push({
                fItemName: item.sectionName,
                fItemValue: item.sectionId,
              });
            });
          }
        }
      });
    },
    selectTender(e) {
      this.falgId = e;

      this.getList.stationId = "";

      this.getList.machineId = "";
      this.bhjDataList = [];
      this.bhzDataList = [];
      // 获取拌合站
      this.mixingPlantList(0, this.getList);
    },
    selectStation(e) {
      this.getList.machineId = "";
      this.bhjDataList = [];
      this.getbhjDataMethods(e);
    },
    // 重置按钮
    reset() {
      this.timeDuring = [];
      this.getList = {
        companyId: "", // 施工标段id
        startDates: "", // 开始时间
        endDates: "", // 截至时间
        machineId: "", // 拌和机编号
        enCode: "",
        stationId: "",
      };
    },

    // 点击当前
    rowChange(val) {
      this.row = val;
      this.fId = val.fId;
    },

    // 弹框2
    editText2(row) {
      var row = JSON.parse(this.$route.query.data);
      this.loadingEditDialogSC = true;
      this.tableList.taskNumber = row.fProducetasknumber;
      this.tableList.companyid = row.fCompanyid;
      this.tableList.page = 1;
      this.isShow = true;
      this.baseData = {
        F_ProduceTaskNumber: row.fProducetasknumber, // 生产任务编号
        F_EngineeringName: row.fEnginerringname, // 工程名称
        F_EngineeringPartName: row.fEnginerringpart, // 工程部位
        F_StrengthGrade: row.fStrengthlevel, // 强度等级
        F_DischargeDates: "", // 出料时间
      };
      getTotalAmountDetail(this.tableList)
        .then((res) => {
          if (res.errcode == 0) {
            console.log("任务单号详情", res);
            var that = this;
            // that.dialogEditVisibleSC = true;
            that.loadingEditDialogSC = false;
            that.tableData1 = res.data.pageInfo.list;

            this.baseData.F_DischargeDates =
              that.tableData1[0].F_DischargeDates; // 出料时间
            that.queryCriteriaData1 = res.data.pageInfo; //分页信息
            that.navigatepageNums1 =
              that.queryCriteriaData1.navigatepageNums.length;
          }
        })
        .catch(() => {
          console.log("任务单详情接口报错");
        });
      //   }
      // })
      // .catch(() => {
      //   console.log("骨料名称接口报错");
      // });
      // } else {
      //   return this.$message.error("本条数据暂时没有生产记录");
      // }
    },
    // 折叠面板
    changeCollapse(e) {
      console.log(this.activeNames, e);
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    indexMethod(index) {
      return index + 1 + (this.tableList.page - 1) * 15; // page是当前的页码，size是页码容量
    },
    handleCurrentChange(val) {
      this.tableList.page = val;
      this.tableList.taskNumber = this.row.fProducetasknumber;
      this.tableList.companyid = this.row.fCompanyid;
      getTotalAmountDetail(this.tableList).then((res) => {
        if (res.errcode == 0) {
          console.log(res.data);
          var that = this;
          that.tableData1 = res.data.pageInfo.list;
          this.queryCriteriaData1 = res.data.pageInfo; //分页信息
          this.navigatepageNums1 =
            this.queryCriteriaData1.navigatepageNums.length;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getDate() {},
    // 获取页面容器高度
    getHeight() {
      // var h = document.documentElement.clientHeight; //获取页面可见高度
    },

    selectionChange() {},
    // 排序方法
    sortChange() {},
  },
};
</script>

<style scoped>
.printTables {
  background: #fff;
  display: flex;
  justify-content: end;
  padding: 5px;
  margin-top: 10px;
}

.dialogBody {
  /* padding: 3px 20px; */
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.baseTitle {
  /* border: 1px solid #0c204d; */
  border-bottom: 1px solid #0c204d;
  height: 30px;
  line-height: 30px;
  position: relative;
  padding-left: 15px;
}

.baseTitle::after {
  display: block;
  content: "";
  height: 30px;
  width: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background: #0c204d;
}

/* 砼配合比表格 */
.mixProportion {
  width: 99%;
  height: 150px;
  margin: 20px 0;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.titleBig {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
}

.title {
  height: 100%;
  width: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #ccc;
  font-size: 12px;
  font-weight: 700;
}

.title1 {
  display: flex;
  flex-direction: column;
}

.title1_1 {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ccc;
}

.title1_2 {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title1_2_1 {
  width: 33%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #ccc;
}

.title1_2_2 {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #ccc;
}

.titleSmall {
  width: 100%;
  height: 30px;
  border-bottom: 1px solid #ccc;
  /* background: #0c204d; */
  display: flex;
}

.title2 {
  width: 8%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #ccc;
}

.titleSmall /deep/ .el-input__inner {
  height: 27px !important;
  line-height: 26px !important;
  text-align: center;
  border: none;
}

.titleSmall /deep/ .el-input {
  line-height: 28px !important;
}

/* 砼配合比表格 */
/* 任务单弹框 */
.Multi_level_header {
  display: flex;
  flex-direction: column;
  /* align-items: ; */
}

.Multi_level_header /deep/.el-table__body-wrapper tr {
  height: 80px !important;
}

.Multi_level_header /deep/.el-table__body-wrapper .lineBoxhidden {
  height: 64px !important;
  line-height: 22px !important;
}

.Multi_level_header /deep/.el-table .el-table__body-wrapper .cell {
  height: 100% !important;
}

.materialClass /deep/.el-table tr:nth-child(4) {
  display: none;
}

#materialPage {
  flex: 1;
  /* background: pink; */
}

#materialPage /deep/ .bgwarn2 {
  background: #e6a23c !important;
  color: #fff !important;
}

#materialPage /deep/ .bgwarn1 {
  background: #409eff !important;
  color: #fff !important;
}

#materialPage /deep/ .bgwarn3 {
  background-color: #f56c6c !important;
  color: #fff !important;
}

#materialPage /deep/ .bgwarn4 {
  background-color: rgb(212, 179, 137) !important;
  color: #fff !important;
}

/* 任务单弹框 */
</style>
